<template>
	<view class="login-container">
		<view class="login-box">
			<view class="logo">
				<text class="title">欢迎来到轻舟</text>
			</view>
			<input v-model="username" class="input-field" placeholder="请输入用户名"  @confirm="login"/>
			<input v-model="password" class="input-field" placeholder="请输入密码" type="password" @confirm="login"/>
			<button @click="login" class="login-button">登录</button>
			<button @click="register" class="login-button">注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				loginMessage: ''
			};
		},
		methods: {
			login() {
				uni.request({
					url: 'http://localhost:3000/api/login',
					method: 'POST',
					data: {
						username: this.username,
						password: this.password
					},
					success: (res) => {
						uni.setStorageSync('username', this.username)
						if (res.data.success) {
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/home/home',
								})
								
							}, 1000)

						} else {
							uni.showToast({
								title: '用户未注册',
								icon: 'error'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '登录失败，请检查密码和用户名',
							icon: 'error'
						});
						console.error('请求失败:', err);
						this.loginMessage = '请求失败，请稍后重试';
					}
				});
			},
			
			register(){
				uni.navigateTo({ url: '/pages/userInfo/userRegister/userRegister' });
			}
		}
	};
</script>

<style scoped>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background: #F0F3E4;
	}

	.login-box {
		width: 70%;
		max-width: 350px;
		height: 50%;
		background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		animation: fadeIn 0.5s ease;
	}

	.title {
		color: rgb(126, 131, 125);
		margin-top: 40px;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.logo {
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.input-field {
		border: 1px solid #f6f69e;
		border-radius: 5px;
		padding: 10px;
		margin-top: 40px;
		margin-bottom: 15px;
		color: rgb(126, 131, 125);
	}

	.login-button {
		background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
		color: rgb(126, 131, 125);
		border-radius: 10px;
		border: none;
		margin-top: 10px;
		padding: 10px;
		font-size: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.login-button:hover {
		background-color: #c3d618;
	}

	.message {
		text-align: center;
		color: red;
		margin-top: 10px;
	}
</style>